<template>
  <div>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="4">
          <el-button type="primary" size="small" @click="showEditDialog('')">添加</el-button>
        </el-col>
      </el-row>
      <el-table :data="cfgList" border stripe>
        <el-table-column label="ID" prop="id" width="70"></el-table-column>
        <el-table-column label="充值金额" prop="amount"></el-table-column>
        <el-table-column label="关联批次ID" prop="batchId"></el-table-column>
        <el-table-column label="绑券数量" prop="bindCouponNum"></el-table-column>
        <el-table-column label="关联批次名称" prop="batchName"></el-table-column>
        <el-table-column label="关联批次面值" prop="batchFacePrice"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-switch
                v-model="scope.row.status"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="Y"
                inactive-value="N"
                @change="updateStatus(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="修改" width="100">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
          </template>
        </el-table-column>
        <el-table-column label="顺序" prop="sortNum">
          <template slot-scope="scope">
            <el-button
                type="text"
                size="small"
                @click="moveUp(scope.row, scope.$index)"
                :disabled="scope.$index === 0">上移</el-button>
            <el-button
                type="text"
                size="small" style="margin-left:16px"
                @click="moveDown(scope.row, scope.$index)"
                :disabled="getFormLength(scope.$index)" >下移</el-button>
          </template>
        </el-table-column>

      </el-table>

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="queryInfo.pageNo" :page-sizes="[5, 10, 20, 40, 60]"
                     :page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </el-card>

    <el-dialog title="配置信息" :visible.sync="editDialogVisible" @close="editDialogClosed">
      <el-form :model="editForm"  ref="editFormRef" label-width="90px" class="demo-ruleForm">
        <el-form-item label="金额" prop="amount">
          <el-input v-model="editForm.amount" style="width: 80%;"></el-input>
        </el-form-item>
      </el-form>
      <el-form :model="editForm"  ref="editFormRef" label-width="90px" class="demo-ruleForm">
        <el-form-item label="关联批次ID" prop="batchId">
          <el-input v-model="editForm.batchId" style="width: 100px;margin-right: 10px;" />
          绑券数量: <el-input-number v-model="editForm.bindCouponNum" :min="1" :max="20" />
        </el-form-item>
      </el-form>
      <el-form :model="editForm"  ref="editFormRef" label-width="90px" class="demo-ruleForm">
        <el-form-item label="描述" prop="cfgDesc">
          <quill-editor
              v-model="editForm.cfgDesc"
              :options="editorOption"
              ref="myQuillEditor" style="width: 85%;"/>

        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveMemberAccountChargeCfg()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Api from "@/api/MemberAccountChargeCfg.js";

export default {
    data() {
      return {
        drawer: false,
        dialogVisible: false,
        disabled: false,
        queryInfo: {
          id: "",
          name:'',
          pageNo: 1,
          pageSize: 40, // 页大小
        },
        editDialogVisible: false,
        editForm: {
          id: '',
          bindCouponNum:1
        },
        cfgList: [],
        total: 0,
        editorOption: {
          //符文本编辑器的配置
          placeholder: "",
        }
      };
    },
    created() {
      this.getMemberAccountChargeCfgList();
    },
    methods: {
      getMemberAccountChargeCfgList() {
        Api.getMemberAccountChargeCfgList(this.queryInfo).then((res) => {
          if (res.success) {
            this.cfgList = res.data.records;
            this.total = res.data.total;
          } else {
            return this.$message.error("获取列表失败");
          }
        });
      },
      saveMemberAccountChargeCfg() {
        Api.saveMemberAccountChargeCfg(this.editForm).then((res) => {
          if (res.success) {
            this.$message.success("保存成功");
            this.editDialogVisible = false;
            this.getMemberAccountChargeCfgList();
          } else {
            return this.$message.error("保存失败：" + res.msg);
          }
        });
      },
      updateStatus(row) {
        Api.setMemberAccountChargeCfgStatus({'id':row.id, 'status':row.status}).then(res => {
          if (res.success) {
            this.$message.success('设置成功！')
          } else {
            return this.$message.error('设置失败！')
          }
        })
      },

      async showEditDialog(id) {
        Api.getMemberAccountChargeCfg({'id':id}).then(res => {
          if (res.success) {
            this.editForm = res.data
            this.editDialogVisible = true
          } else {
            return this.$message.error('查询失败')
          }
        })
      },

      moveUp(item, index) {
        this.cfgList.splice(index - 1, 0, item);
        this.cfgList.splice(index + 1, 1);
        this.setMoveUpAndDown();
      },
      // 下移
      moveDown(item, index) {
        this.cfgList.splice(index + 2, 0, item);
        this.cfgList.splice(index, 1);
        this.setMoveUpAndDown();
      },
      getFormLength(index) {
        if (index === this.cfgList.length - 1) return true;
        else return false;
      },
      setMoveUpAndDown() {
        var ids = "";
        for( let i of this.cfgList){
          ids = ids.concat(i.id, ",");
        }
        ids = ids.substr(0,ids.length-1);
        Api.setUpAndDown({'ids':ids}).then(res => {
          if (res.success) {
          } else {
            return this.$message.error('设置失败')
          }
        })
      },
      editDialogClosed() {

      },
      handleSizeChange(pageSize) {
        this.queryInfo.pageSize = pageSize;
        this.getMemberAccountChargeCfgList();
      },
      handleCurrentChange(pageNo) {
        this.queryInfo.pageNo = pageNo;
        this.getMemberAccountChargeCfgList();
      },
    }
};
</script>

<style lang="less" scoped>
.logo_pic {
  max-width: 100px;
}
.upload_img {
  width: 148px;
  height: 148px;
  object-fit: cover;
  border-radius: 6px;
  margin-right: 20px;
}
</style>
